<template>
  <div class="search-list">
    <div
      class="list-item"
      v-for="(item, index) in searchList"
      :key="index"
    >
      <label class="label-text" v-if="item.label">{{ item.label }}</label>
      <div class="handle-input" :style="[ item.width ? {width: item.width} : item.flex ? {flex: item.flex} : {width: '200px'}]">
        <el-input
          v-if="item.type === 'input'"
          :size="size"
          @input="inputValue(item.key, $event)"
          v-model="item.value"
          :value="item.value"
          @keyup.enter.native="doSearch"
          :placeholder="item.placeholder || '请输入搜索内容'"
          clearable
        />
        <el-select
          class="select"
          style="width:100%;"
          :size="size"
          v-if="item.type === 'select'"
          v-model="item.value"
          :placeholder="item.placeholder || '请选择'"
          @input="inputValue"
          :value="item.value"
          :ref="item.key"
          @change="item.handle"
        >
          <el-option
            v-for="(selectItem, selectIndex) in item.selectList"
            :key="selectIndex"
            :label="selectItem[item.selectKey]"
            :value="selectItem[item.selectValue]"
          />
        </el-select>
      </div>
    </div>
    <div class="list-btn">
      <el-button :size="size" type="primary" icon="el-icon-search" @click="doSearch">搜索</el-button>
      <el-button v-if="refresh" :size="size" icon="el-icon-refresh" @click="doRefresh">重置</el-button>
      <el-button v-if="other" :size="size" icon="el-icon-plus" @click="doOther" type="danger">{{otherText}}</el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    /*
    searchList每项的值含义如下
    placeholder: 占位符
    value: 绑定值，必须
    key: searchKey表单提交时的键值，可选
    type: 渲染的控件类型，必须
    selectList: 下拉框的列表数据(type为select时必须)
    selectKey: 下拉框的显示名称(type为select时必须)
    selectValue: 下拉框对应的值(type为select时必须)
    handle: 下拉框对应的change事件(type为select时可选)
    width/flex: 表单控件的长度，当为flex:1时为占满剩余长度*/
    searchList: {
      type: Array,
      default: () => []
    },
    selectList: {
      type: Array,
      default: () => []
    },
    size: {
      type: String,
      default: 'mini'
    },
    refresh: {
      type: Boolean,
      default: true
    },
    other: {
      type: Boolean,
      default: false
    },
    otherText: {
      type: String,
      default: '新增'
    }
  },
  methods: {
    inputValue(key, value) {
      this.$emit('input', { key, value })
    },
    doSearch() {
      let data = {}
      this.searchList.map(item => {
        data[item.key] = item.value
      })
      this.$emit('search', data)
    },
    doRefresh() {
      this.$emit('refresh')
    },
    doOther() {
      this.$emit('other')
    }
  }
}
</script>

<style lang="scss" scoped>
.search-list {
  display: flex;
  flex-wrap: wrap;
  .list-item {
    display: flex;
    padding: 5px 0;
  }
  .list-btn {
    padding: 5px 0;
  }
  .handle-input {
    width: 200px;
    margin-right: 20px;
    display: flex;
  }
}

.mr-10 {
  margin-right: 10px;
}
</style>
